<div class="steps-timeline" resize>
    <md-content class="filter-sections-mask" ng-show="shouldShowMask">
        <section class="filter-section">
            <div class="filter-section-title-mask filter-section-search-bar-title-mask animated-background"></div>
        </section>

        <section class="filter-section header">
            <span class="search-title-input" layout="row">
                <div class="filter-section-search-bar-mask"></div>
            </span>
        </section>

        <section class="filter-section">
            <section class="header" layout="row" layout-align="space-between center">
                <div class="filter-section-title-mask filter-section-events-title-mask animated-background"></div>
                <section>
                    <div class="filter-section-title-mask filter-section-events-toggle-mask animated-background"></div>
                </section>
            </section>

            <section layout="row" layout-align="start center" layout-wrap>
                <div class="filter-section-event-type-mask filter-section-click-mask animated-background"></div>
                <div class="filter-section-event-type-mask filter-section-visit-mask animated-background"></div>
                <div class="filter-section-event-type-mask filter-section-resize-mask animated-background"></div>
                <div class="filter-section-event-type-mask filter-section-tab-change-mask animated-background"></div>
                <div class="filter-section-event-type-mask filter-section-error-mask animated-background"></div>
            </section>
        </section>
    </md-content>

    <md-content class="filter-sections" ng-show="!shouldShowMask">
        <section class="filter-section layout-align-space-between-center layout-row" layout="row" layout-align="space-between center">
            <span class="filter-label">搜索</span>
        </section>
        <section class="filter-section header" layout="row" layout-align="space-between center">
            <span class="search-title-input" ng-model-options="{ debounce: 100 }" layout="row">
                <span layout="column" layout-align="center center" class="icon-wrapper">
                    <svg width="15" height="17" viewBox="0 0 10 11" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6.294 2.921a2.844 2.844 0 1 0-4.023 4.022 2.844 2.844 0 0 0 4.023-4.022m2.96 6.982a.57.57 0 0 1-.806 0L6.656 8.111c-1.56 1.166-3.772 1.056-5.19-.362A3.982 3.982 0 1 1 7.1 2.117c1.418 1.417 1.528 3.63.362 5.19l1.792 1.792a.57.57 0 0 1 0 .804" fill="#9EACBF" fill-rule="evenodd"/>
                    </svg>
                </span>
                <input ng-model="searchText" ng-change="updateSelectedStep()" placeholder="e.g. 'click #element-id'">
            </span>
        </section>
        <section class="filter-section" layout="column" layout-wrap>
            <section class="header" layout="row" layout-align="space-between center">
                <span class="filter-label">筛选</span>
                <section class="filter-options">
                    <span ng-click="showFilters()"> 所有 </span>
                    <span class="vertical-divider"></span>
                    <span ng-click="hideFilters()"> 无 </span>
                </section>
            </section>
            <section layout="row" layout-align="start center" layout-wrap>
                <span layout="column" class="activity-type" ng-class="{'selected': activityTypeStatuses[EVENT_TYPE.MOUSE_CLICK]}"
                      ng-click="toggleFilter(EVENT_TYPE.MOUSE_CLICK)"> Click </span>
                <span layout="column" class="activity-type" ng-class="{'selected': activityTypeStatuses[EVENT_TYPE.DOM_SNAPSHOT]}"
                      ng-click="toggleFilter(EVENT_TYPE.DOM_SNAPSHOT)"> Visit </span>
                <span layout="column" class="activity-type" ng-class="{'selected': activityTypeStatuses[EVENT_TYPE.WINDOW_RESIZE]}"
                      ng-click="toggleFilter(EVENT_TYPE.WINDOW_RESIZE)"> Resize </span>
                <span layout="column" class="activity-type" ng-class="{'selected': activityTypeStatuses[EVENT_TYPE.VISIBILITY_CHANGE]}"
                      ng-click="toggleFilter(EVENT_TYPE.VISIBILITY_CHANGE)"> Tab change </span>
                <span layout="column" class="activity-type" ng-class="{'selected': activityTypeStatuses[LOG_LEVEL.ERROR]}"
                      ng-click="toggleFilter(LOG_LEVEL.ERROR)"> Error </span>
            </section>
        </section>
    </md-content>

    <div class="steps-section-mask" ng-show="shouldShowMask">
        <div class="step" ng-repeat="n in [] | range:100">
            <div class="step-mask animated-background"></div>
        </div>
    </div>

    <div class="steps-section" ng-hide="shouldShowMask">
        <md-virtual-repeat-container class="max-height steps-container">
            <div class="step" md-virtual-repeat="step in (filteredSteps = (transformedSteps | filter: { searchLabel: searchText } | activityTypesFilter: activityTypeStatuses))">
                <md-menu-item style="height: 100%">
                    <step data="step"
                          selected-log-id="selectedLogId"
                          is-selected="selectedStep === $index"
                          is-executed="selectedStep > $index"
                          is-expanded="expandedStepIndex === $index"
                          select-step="selectStep($index)"
                          on-step-expand="onStepExpand($index)">
                    </step>
                </md-menu-item>
            </div>
            <md-menu-item ng-show="isBuffering">
                <div ng-include="'../templates/loadingEllipsis.html'"
                     class='buffering-animation-container'>
                </div>
            </md-menu-item>
        </md-virtual-repeat-container>
    </div>
</div>